<template>
  <div>
    <el-container
      v-for="item of list"
      :key="item.id"
      style="height: auto;width: 100%;border: 1px solid #eee;display: flex">
      <el-main style="width:50px;display: flex;height: 100%">
        <span>
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icon-"></use>
            </svg>
          </span>
      </el-main>
      <el-main style="width: 60%;display: flex;height: 100%"  @click.native="goProjectDetail(item.id, item.name)">
        <span>
            {{item.name}}
          </span>
      </el-main>
      <el-main style="width:30%;display: flex;height: 100%;">
        <span @click="handleEdit(item.id, item.name)">
            <svg class="icon delIconSize" aria-hidden="true">
              <use xlink:href="#iconbianji3"></use>
            </svg>
          </span>
        <el-divider direction="vertical" style="height: 100%"></el-divider>
        <span @click="handleDelete(item.id, item.name)" style="text-align: center">
            <svg class="icon delIconSize" aria-hidden="true">
              <use xlink:href="#iconpicture-delet"></use>
            </svg>
          </span>
      </el-main>
    </el-container>
    <el-dialog
      title="提示"
      :visible.sync="deleteProject"
      width="70%">
      <span>确定删除《{{pname}}》吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteProject = false">取 消</el-button>
        <el-button type="primary" @click="delProject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'pmList',
  data () {
    return {
      deleteProject: false,
      list: [],
      pname: '',
      pid: Number
    }
  },
  methods: {
    goProjectDetail (projectID, projectName) {
      sessionStorage.setItem('pid', projectID)
      sessionStorage.setItem('pname', projectName)
      this.$router.push('/projectDetail')
    },
    getProjectList () {
      // axios.get('/static/testData/projectList.json')
      axios.get(this.url + '/project/all')
        .then(this.getProjectListSucc)
    },
    getProjectListSucc (res) {
      if (res.status === 200) {
        const data = res.data
        this.list = data
      }
    },
    handleEdit (projectID, projectName) {
      sessionStorage.setItem('pid', projectID)
      sessionStorage.setItem('pname', projectName)
      this.$router.push('/projectEdit')
    },
    handleDelete (pid, pname) {
      this.deleteProject = true
      this.pname = pname
      this.pid = pid
    },
    delProject () {
      this.$axios({
        method: 'delete',
        url: this.url + '/project/id/' + this.pid
      }).then((res) => {
        if (res.status === 200) {
          alert('删除成功！')
          axios.get(this.url + '/project/all')
            .then(this.getProjectListSucc)
          this.deleteProject = false
        }
      }).catch((err) => {
        alert(err)
      })
    }
  },
  mounted () {
    this.getProjectList()
  }
}
</script>

<style lang="stylus" scoped>
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .5rem
  .delIconSize
    font-size 30px
  .projectIcon
    font-size 28px
  .divider
    margin-top .5rem
</style>
